<template>
	<view class="border-top">
		<view class="item-list px-2 flex-column pt-2" style="margin-bottom: 120rpx;">
			<view class="item px-25 mb-3" v-for="(item, index) in list" :key="index">
				<view class="flex align-center justify-between py-3">
					<view class="flex">
						<image src="../../../static/img/ic_default_head.png" style="width: 64rpx;height: 64rpx;"
							class="rounded-circle mr-2" mode=""></image>
						<view class="font30 font-weight-500">{{ item.xsName }}</view>
					</view>
					<!-- <view class="color999 font26">{{ item.applyTime }}</view> -->
				</view>
				<view class="flex align-center justify-between">
					<view class="flex color333 font-weight-500 font30 mb-3 line-h">年级：{{ item.njName }}</view>
					<view class="flex color333 font-weight-500 font30 mb-3 line-h">班级：{{ item.bjName }}</view>
				</view>
				<view class="flex color333 font-weight-500 font30 mb-3 line-h">时间：{{ item.applyTime }}</view>
				<view class="flex color333 font-weight-500 font30 mb-3 line-h">请假时间：{{ item.leaveTime }}</view>
				<view class="flex color333 font-weight-500 font32 mb-3 flex-wrap">事由：{{item.leaveReason}}</view>
				<view class="flex color333 font-weight-500 font32 mb-3 flex-wrap">图片：</view>
				<view class="flex pb-3 border-bottom" v-if="item.leaveImgList != ''">
					<view class="mx-2" v-for="(items, i) in item.leaveImgList" :key="i">
						<image v-if="Object.keys(items).length!=0" @click="previewImg(items.leaveImg)" @error="error(index,i)" :src="items.leaveImg"
							style="width: 206rpx;height: 146rpx;" class="" mode="aspectFit"></image>
					</view>
				</view>
				<view class="" v-if="item.replyCode == '1'">
					<view class="flex py-2">
						<view class="font30 font-weight-500">审批结果：</view>
						<view class="font30 font-weight-500 text-main" v-if="item.replyCode == '1'">
							{{ item.teacherReply == 1 ? '批准' : '未批准' }}
						</view>
					</view>
					<view class="flex py-2" v-if="item.teacherReply == '2'&&item.replyCode == '1'">
						<view class="font30 font-weight-500">拒绝理由：</view>
						<view class="font30 font-weight-500 text-main">{{ item.reply }}</view>
					</view>
				</view>
				<view class="py-2" v-else>
					<view class="flex justify-end align-center">
						<view class="btn-item mr-2" @click="reject(item.longId)">驳回</view>
						<view class="btn-item active" @click="approval(item.longId)">批准</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open">
			<view class="p-3">
				<u--textarea v-model="value" placeholder="请输入驳回内容"></u--textarea>
				<view class="flex justify-end align-center mt-2">
					<view class="p-btn-item mr-2" @click="close">取消</view>
					<view class="p-btn-item btn" @click="toreject">驳回</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				bid: null,
				value: ""
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			error: function(index, i) { //加载图片出现404错误之后用默认图片替换
				this.list[index].leaveImgList[i].leaveImg = '../../../static/img/none_img.jpg'; //默认图片路径  
			},
			reject(id) {
				this.bid = id;
				this.open()
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			toreject() {
				let this_ = this;
				let opts = {
					url: 'Ls/UpdateLsQj.shtml'
				};
				let param = {
					longId: this_.bid,
					teacherReply: 2,
					Reply: this_.value
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							this_.close();
							this_.getData()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			approval(id) {
				let this_ = this;
				let opts = {
					url: 'Ls/UpdateLsQj.shtml'
				};
				let param = {
					longId: id,
					teacherReply: 1
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							this_.getData()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			toLeave() {
				uni.navigateTo({
					url: '../toLeave/toLeave'
				});
			},
			getData() {
				let this_ = this;
				let opts = {
					url: 'Ls/SearchQj.shtml'
				};
				let param = {
					class_code: uni.getStorageSync('classcode')
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							let data = res.data.data;
							this.list = data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			}
		}
	};
</script>

<style>
	.item {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(64, 64, 64, 0.12);
		border-radius: 20rpx;
	}

	.btn-item {
		height: 60rpx;
		width: 140rpx;
		border: 1rpx solid #666666;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
	}

	.active {
		border-color: #FFA800;
		color: #FFA800;
	}

	.p-btn-item {
		height: 60rpx;
		width: 200rpx;
		background-color: #666666;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}

	.p-btn-item.btn {
		background-color: #FFA800;
	}
</style>
